﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
{% load static %}
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>查看结果</title>
    <link href="{% static 'assets/css/bootstrap.css' %}" rel="stylesheet"/>
    <link href="{% static 'assets/css/font-awesome.css' %}" rel="stylesheet"/>
    <link href="{% static 'assets/js/morris/morris-0.4.3.min.css' %}" rel="stylesheet"/>
    <link href="{% static 'assets/css/custom-styles.css' %}" rel="stylesheet"/>

</head>

<body>
<div id="wrapper">
    <!-- 头部bar -->
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/admin/index">POM - 自动化测试平台
            </a>
        </div>

        <ul class="nav navbar-top-links navbar-right color-white">
            <li>
                <a href="/login/" class=" pointer">退出登录</a>
            </li>
            <li><span class="mar-rignt-100">{{user}}</span></li>
        </ul>
    </nav>
    <!-- 头部bar end -->
    <!-- 左侧导航  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">

                <li>
                    <a href="/admin/index"><i class="fa fa-dashboard"></i> 系统概括</a>
                </li>
                <li>
                    <a href="/admin/project"><i class="fa fa-desktop"></i> 项目管理</a>
                </li>
                <li>
                    <a href="/admin/page"><i class="fa fa-bar-chart-o"></i> 页面管理</a>
                </li>
                <li>
                    <a href="/admin/element"><i class="fa fa-qrcode"></i> 页面元素</a>
                </li>

                <li>
                    <a href="/admin/keyword"><i class="fa fa-table"></i> 关键字库</a>
                </li>
                <li>
                    <a href="/admin/testcase"><i class="fa fa-edit"></i> 测试用例 </a>
                </li>
                <li>
                    <a class="active-menu" href="/admin/result"><i class="fa fa-fw fa-file"></i> 测试结果 </a>
                </li>
                <li>
                    <a href="/admin/loginConfig"><i class="fa fa-fw fa-building-o"></i> 登录配置 </a>
                </li>
                <li>
                    <a href="/admin/task"><i class="fa fa-fw fa-sitemap"></i> 任务管理 </a>
                </li>
            </ul>
        </div>

    </nav>
    <!-- 左侧导航  -->
    <div id="page-wrapper">
        <div id="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <h1 class="page-header">
                        <a href="/admin/result">测试结果</a> - 结果详情
                    </h1>
                </div>
            </div>
            <!--内容-->
            <!--内容-->
            <div class="row">
                <div class="col-md-12">
                    <!-- Advanced Tables -->
                    <div class="panel panel-default">
                        <!--<div class="panel-heading">表格名字</div>-->
                        <div class="panel-body width-p9" style="min-height:600px">
                            <form class="form-horizontal" role="form">
                                <div class="form-group">
                                    <label for="firstname" class="col-sm-2 control-label">用例标题</label>
                                    <div class="col-sm-10  mar-top-6" id="testcaseTitle" data-resultId="{{ id }}">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label">浏览器</label>
                                    <div id='browsers' class="col-sm-10 mar-top-6">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label">测试环境</label>
                                    <div id='es' class="col-sm-10 mar-top-6">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label">测试结果</label>
                                    <div id='result' class="col-sm-10 mar-top-6">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">断言类型</label>
                                    <div id="checkType" class="col-sm-10 mar-top-6">
                                        url
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">断言值</label>
                                    <div id="checkValue" class="col-sm-10 mar-top-6">
                                        url
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">前置登录</label>
                                    <div id='logins' class="col-sm-10 mar-top-6">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">结果详情</label>
                                    <div class="col-sm-10 mar-top-6">
                                        <div class="table-responsive">
                                            <table class="table table-striped table-bordered table-hover"
                                                   id="result-table">
                                                <thead>
                                                <tr>
                                                    <th>序号</th>
                                                    <th>浏览器</th>
                                                    <th>测试环境</th>
                                                    <th style="width: 160px">测试数据</th>
                                                    <th>预期结果</th>
                                                    <th>实际结果</th>
                                                    <th style="width: 180px">备注信息</th>
                                                    <th>测试开始时间</th>
                                                    <th>测试结束时间</th>
                                                </tr>
                                                </thead>
                                                <tbody id="splitResult">
                                            </table>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="lastname" class="col-sm-2 control-label"></label>
                                    <div class="col-sm-10">
                                        <a type="button" href="/admin/result"
                                           class="btn btn-primary mar-rignt-20">返回</a>
                                    </div>
                                </div>

                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--内容-->

            <!--内容end-->
            <footer>
                <p class="text-center"></p>
            </footer>
        </div>
        <!-- /. PAGE INNER  -->
    </div>
    <!-- /. PAGE WRAPPER  -->
</div>
<!-- /. WRAPPER  -->
<script src="{% static 'assets/js/jquery-1.10.2.js' %}"></script>
<script src="{% static 'assets/js/bootstrap.min.js' %}"></script>
<script src="{% static 'assets/js/jquery.metisMenu.js' %}"></script>
<script src="{% static 'assets/js/morris/raphael-2.1.0.min.js' %}"></script>
<script src="{% static 'assets/js/morris/morris.js' %}"></script>
<script src="{% static 'assets/js/dataTables/jquery.dataTables.js' %}"></script>
<script src="{% static 'assets/js/dataTables/dataTables.bootstrap.js' %}"></script>
<script src="{% static 'assets/js/custom-scripts.js' %}"></script>
<script src="{% static 'assets/datetimepicker/bootstrap-datetimepicker.min.js' %}"></script>
<script src="{% static 'assets/datetimepicker/bootstrap-datetimepicker.zh-CN.js' %}"></script>
<script src="{% static 'assets/datetimepicker/moment-with-locales(1).js' %}"></script>

<script>
    var resultId = $("#testcaseTitle").attr("data-resultId");
    init();
    value();

    
    function init() {
        $.ajax({
            url: '/api/v1/result/' + resultId,
            type: 'post',
            dataType: 'json',
            success: function (res) {
                if (res.code == 200) {
                    $("#testcaseTitle").html("<a href='/admin/testcase/" + res.data.testcaseId + "'>" + res.data.title + "</a>");
                    $("#browsers").html(res.data.browsers.join("  ,  "));
                    var es = res.data.environments;
                    $("#es").html(es.length > 0 ? es.join("  ,  ") : "-");
                    var result = res.data.status;
                    var resultText = result == 10 ? "队列中" : result == 20 ? "测试中" : result == 30 ? "成功" : result == 40 ? "失败" : "";
                    if (result == 40) {
                        $("#result").html('<div class="color-red">' + resultText + '</div>');
                    } else {
                        $("#result").html('<div class="color-green">' + resultText + '</div>');
                    }
                    $("#checkType").html(res.data.checkType);
                    var logins = res.data.beforeLogin;
                    $("#logins").html(logins.length > 0 ? logins.join("  ,  ") : "无");
                    var splitResult = res.data.splitResults;
                    var sr = "";
                    for (var i = 0; i < splitResult.length; i++) {
                        var resultDetails = splitResult[i];
                        sr += '<tr class="odd">';
                        sr += '<td class="center">' + (i + 1) + '</td>';
                        sr += '<td class="center">' + resultDetails["browser"] + '</td>';
                        sr += '<td class="center">' + resultDetails["environment"] + '</td>';
                        sr += '<td class="center">';
                        for (var j in resultDetails["parameter"]) {
                            if (j == "expect") {
                                continue;
                            }
                            sr += (j + "=" + resultDetails["parameter"][j])
                            sr += "</br>";
                        }
                        sr += '</td>';
                        sr += '<td class="center">' + (resultDetails["expect"] ? "成功" : "失败") + '</td>';
                        var status = resultDetails["status"];
                        sr += '<td class="center">' + (status == 10 ? "队列中" : status == 20 ? "测试中" : status == 30 ? "成功" : status == 40 ? "失败" : status == 50 ? "跳过" : "") + '</td>';
                        sr += '<td class="center">' + resultDetails["remark"] + '</td>';
                        sr += '<td class="center">' + resultDetails["startTime"] + '</td>';
                        sr += '<td class="center">' + resultDetails["finishTime"] + '</td>';
                    }
                    $("#splitResult").append(sr);
                } else {
                    $("#message").html(res.message);
                }
            }
        });
    }

    function value()
    {
        var duanyanId,duanyanType,duanyanText;
        $.ajax({
                url: '/api/v1/result/' + resultId,
                type: 'post',
                dataType: 'json',
                success: function (res) {
                    if (res.code == 200) {
                        duanyanId = res.data.checkValue;
                        duanyanType = res.data.checkType;
                        duanyanText = res.data.checkText;
                        if (res.data.selectText == 'all')
                            selectType = '匹配类型为： 完全匹配';
                        else
                            selectType = '匹配类型为： 包含匹配';
                        if (duanyanType == 'url')
                            $("#checkValue").html("打开的url是否为 ： " + res.data.checkValue);
                        else
                            {
                                $.ajax({
                                    url: '/api/v1/element/' + duanyanId,
                                    type: 'post',
                                    dataType: 'json',
                                    success: function (res) {
                                    if (res.code == 200) {
                                        $("#checkValue").html("【 " + res.data.name + " 】  是否为 : '&nbsp;&nbsp;&nbsp;"+ duanyanText +"  &nbsp;'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;（&nbsp;" + selectType + "&nbsp;）");
                                        }
                                    }
                                });
                            }
                    }
                }
        });
    }
</script>

</body>

</html>